<template>
 <div class="information">
    <h3>最新资讯</h3>
    <div v-for="item in area" :key="item.id" class="inform-box">
        <img :src="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc" alt="" />
    <div class="inform-right">
    <h4>{{ item.title }}</h4>
    <p>
        <span>{{ item.from }}</span>
        <span>{{ item.date }}</span>
    </p >
    </div>
    </div>
 </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  name: 'NewConsultPage',
  data () {
    return {
      area: []
    }
  },
  created () {
    this.zix()
  },
  methods: {
    async zix () {
      const data = await instance.get(
        '/home/news?area=AREA%7C88cff55c-aaa4-e2e0'
      )
      //  console.log(zi.data.body);
      this.area = data.body
    }
  }
}
</script>

<style scoped lang="less">
.information {
    margin: 20px 0;
    margin-top: 10px;
    background-color: #fff;
    padding-bottom: 50px;
h3 {
    padding: 10px;
    margin-left: 5px;
    font-size: 15px;
}
 .inform-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 120px;
//   padding: 10px;
  margin: 10px 15px 0;
  border-bottom: 1px solid #e5e5e5;
 }
 .inform-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 10px;
    color: #333;
    font-size: 14px;
 p {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    color: #9c9fa1;
    font-size: 12px;
 }
 }
 img {
  width: 120px;
  height: 100px;
 }
}
</style>
